x`<template>
  <h1>床位信息</h1>
  <el-row :gutter="10">

<!--    <el-col :span="6">-->
<!--      <el-input v-model="query.RoomData.name" placeholder="请输入医生姓名c" style="width: 200px;" />-->
<!--    </el-col>-->

    <el-col :span="6">
      <el-select v-model="query.BedData.statue"
                 :clearable="true"
                 placeholder="病床的状态">
        <el-option v-for="item in statueType.data"
                   :key="item.statue"
                   :label="item.statueName"
                   :value="item.statue" />
      </el-select>
    </el-col>

    <el-col :span="6">
      <el-select v-model="query.BedData.roomId"
                 :clearable="true"
                 placeholder="房间号">
        <el-option v-for="item in roomIds.data"
                   :key="item.roomId"
                   :label="item.roomNumber"
                   :value="item.roomId" />
      </el-select>
    </el-col>

    <el-col :span="6">
      <el-button type="primary" @click="getBedData(query.BedData)">搜索</el-button>
    </el-col>

  </el-row>
  <el-table :data="tableData.data" style="width: 100%;margin-top: 20px">

    <el-table-column label="序号" type="index" width="80" align="center">
    </el-table-column>


    <el-table-column label="房间号" prop="roomNumber" width="100" align="center">
    </el-table-column>

    <el-table-column label="床位号" prop="bedNum" width="100" align="center">
    </el-table-column>


    <el-table-column label="床位状态" prop="statue" width="100" align="center">
      <template #default="scope">
        {{scope.row.statue ==0? "未使用":"已使用"}}
      </template>
    </el-table-column>

    <el-table-column label="病人姓名" prop="patientName" width="180" align="center">

    </el-table-column>

    <el-table-column label="医生姓名" prop="doctorName" width="180" align="center">
    </el-table-column>

    <el-table-column label="操作" width="200px" align="center">
      <template #default="scope">
        <el-button
          style="width: 60px;"
          size="small"
          @click="handleEdit(scope.row)"
        >修改
        </el-button>
        <el-button
          style="width: 60px;"
          size="small"
          type="danger"
          v-model:current-page="query.BedData.pages"
          v-model:age-sizes="query.BedData.size"
          @click="handleDelete(scope.row)"
        >删除
        </el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <!--分页组件-->
  <div>
    <el-pagination
      small
      layout="total, prev, pager, next, jumper"
      :total="tableData.total"
      class="pagiantion "
      @current-change="pageChange"
      v-model:current-page="query.BedData.pages"
      v-model:page-size="query.BedData.size"
    />
  </div>
</template>

<script lang="js" setup>
import { Timer } from "@element-plus/icons-vue";
import { onMounted, reactive } from "vue";
import {getBedApi, deleteBedApi } from "@/utils/BedRequest";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import { getRoomIdAndNumberApi } from "@/utils/RoomRequest";

const router = useRouter();
//展示数据
const tableData = reactive({
  data: [],
  total: 0,
  current: 1, //当前页数
  size: 10  //每页显示几条数据
});
const statueType = reactive({
  data: [
    {
      statueName: "未使用",
      statue: "0"
    },
    {
      statueName: "已使用",
      statue: "1"
    },
  ]
});

//病房的id和房间号
const roomIds = reactive({
  data: []
});


//请求参数
const query = reactive({
  BedData: {
    "bedId": "",
    "bedNum": "",
    "doctorId": "",
    "patientId": "",
    "roomId": "",
    "statue": "",
    "size": tableData.size,
    "pages": tableData.current,
    "createTime": "",
    "updateTime": ""
  }
});


//组件加载时触发
onMounted(() => {
  getBedData(query.BedData);
  getRooIdAndRoomNumber(3);
});

//获取数据
const getBedData = async (requestData) => {
  let res = await getBedApi(requestData);
  tableData.data = res.data;
  tableData.total = res.total;
  tableData.current = res.current;
};

//获取病房间的id和房间号
const getRooIdAndRoomNumber = async (id) => {
  //发送请求
  let res = await getRoomIdAndNumberApi(id);
  // 为roomIds.data 赋值
  roomIds.data = res.data;
};

//分页的页码变化时触发
const pageChange = () => {
  getBedData(query.BedData);
};

//修改回调
const handleEdit = (row) => {
  if (row.statue === 1){
    ElMessage({
      type: "warning",
      message: "该病床已被使用"
    })
  }else {
    router.push({
      path:'/home/updatebed',
      query:{id:row.bedId}
    })
  }
};

//删除
const handleDelete = (row) => {
  ElMessageBox.confirm(
    "确定要删除吗?",
    "警告",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    }
  )
    .then(async () => {
      let res = await deleteBedApi(row.roomId);
      if (res.data) {
        ElMessage({
          type: "success",
          message: "删除成功"
        });
      } else {
        ElMessage({
          type: "error",
          message: "删除成功"
        });
      }
      getBedData(query.BedData);

    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除"
      });
    });
};

</script>

<style scoped>
</style>